<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
</head>

<body>
  <div id="root">

    <input type="text" v-model='phone' v-validate="'phone'">

  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        phone: '13232323252'
      },
      directives: {
        // bind / update
        validate(el, binds) {
          // 验证条件
          let condition = binds.value
          // 修饰符对象
          let modifiers = binds.modifiers

          // 有为真 true
          if (modifiers.num) { // 有此修饰符，判断字符串长度 value指定的长度值
            if (el.value.length > condition) {
              el.style.color = 'red'
            }
          } else {
            if ('phone' == condition) {
              // 判断手机号码合法性
              if (!/^1[3-9]\d{9}$/.test(el.value)) {
                el.style.color = 'red'
              }else{
                el.style.color = '#000'
              }
            }
          }

        }
      }
    })
  </script>
</body>

</html>